<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">


</head>

<body>
<div id="function">

    <!--    内容-->
    <div style="color: black; font-size: 20px; margin: 10px 0">功能管理</div>
    <div style="height: 1px; background-color: white"></div>
    <el-input v-model="search" style="width: 20%;" suffix-icon="el-icon-search" placeholder="请输入名称按回车搜索"
              @keyup.enter.native="loadTable"></el-input>
    <el-button @click="add" type="primary" size="mini" style="margin: 10px 0">查找</el-button>
    <!-- <el-button @click="exp" type="primary" size="mini" style="margin: 10px 0">导出</el-button> -->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                :prop="item.prop"
                :label="item.label"
                v-for="item in props"
        >
        </el-table-column>
<!--        <el-table-column-->
<!--                fixed="right"-->
<!--                label="操作"-->
<!--                width="150">-->
<!--            <template slot-scope="scope">-->
<!--&lt;!&ndash;                <el-button @click="edit(scope.row)" type="text">编辑</el-button>&ndash;&gt;-->
<!--                <el-popconfirm-->
<!--                        @onConfirm="del(scope.row.id)"-->
<!--                        title="确定删除？"-->
<!--                >-->
<!--                    <el-button type="text" slot="reference">删除</el-button>-->
<!--                </el-popconfirm>-->
<!--            </template>-->
<!--        </el-table-column>-->
        <el-table-column
                label = "权限页面"

        >
            <template slot-scope="scope">
            <el-button @click="showdetail(scope.row)" type="text">查看权限页面</el-button>
            </template>

        </el-table-column>



    </el-table>
    <!-- 分页 -->
    <div style="background-color: white">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

    <el-dialog :title="titlename" :visible.sync="detailPageVisible" width="90%"
               close-on-click-modal="false" close-on-press-escape="false" show-close="false">
        <el-table
                :data="newentity"
                border
                style="width: 100%">
            <el-table-column
                    :prop="item.prop"
                    :label="item.label"
                    v-for="item in props2"
            >
            </el-table-column>

        </el-table>
    </el-dialog>


</div>

</body>
<script src="../../js/vue.min.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/base.js"></script>

<script type="text/javascript">
    <!--    js内容 -->
    let urlBase = "/permission";
    new Vue({
        el: "#function",
        data() {
            return {

                user: {},
                tableData: [],
                pageNum: 1,
                pageSize: 10,
                total: 0,
                dialogFormVisible: false,
                detailPageVisible: false,
                entity: {},
                isCollapse: false,
                search: '',
                titlename:"",
                newentity:[],
                props: [{"label": "名称", "prop": "pname"}, {"label": "描述", "prop": "pdescribe"},{"label": "标识id", "prop": "id"}],
                props2:[{"label": "页面标识", "prop": "pagename"}, {"label": "描述", "prop": "pagedescribe"},{"label": "菜单界面地址", "prop": "url"},{"label": "所属大类", "prop": "title"}]

            }
        },
        created() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            this.loadTable();


        },
        methods: {
            con() {
                console.log(this.user.permission);
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            logout() {
                $.get("/user/logout");
                sessionStorage.removeItem("user");
                location.href = "../../index.html";
            },
            loadTable() {
                $.get("/permission?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.search).then(res => {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
            },
            exp() {
                window.open(urlBase + "/export");
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.loadTable();
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
                this.loadTable();
            },
            add() {
                this.entity = {};
                this.dialogFormVisible = true;
            },
            showdetail(obj){
                // console.log(obj)
                this.newentity = obj.functionPages;
                console.log(this.newentity)
                this.titlename = "权限名称："+ obj.pname;
                this.detailPageVisible = true;
            },
            save() {
                let type = this.entity.id ? "PUT" : "POST";
                $.ajax({
                    url: urlBase,
                    type: type,
                    contentType: "application/json",
                    data: JSON.stringify(this.entity)
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: "保存成功",
                            type: "success"
                        });
                        this.loadTable();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                    this.dialogFormVisible = false;
                })
            },
            edit(obj) {
                this.entity = obj;
                this.dialogFormVisible = true;
            },
            del(id) {
                $.ajax({
                    url: urlBase + id,
                    type: "delete"
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: "删除成功",
                            type: "success"
                        });
                        this.loadTable();

                        // 重新请求用户基础数据
                        $.get("/user/detail/" + this.user.username).then(res => {
                            this.user = res.data;
                            console.log(this.user)
                            sessionStorage.setItem("user", JSON.stringify(this.user));
                        })
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            }
        }
    })


</script>


</html>